<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">标题</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x>
          <div class="scroller-box">
            {{ lenghttaas }}
            <group label-width="1.9rem" title="cell使用DEMO">
              <cell title="XXXX" value="点击跳转到页面" :link="{path: '/inputReg'}"></cell>
              <cell title="XXXX" value="显示右箭头" is-link @click="gotoss"></cell>
              <cell title="XXXX" :value="test1"></cell>
              <cell class="changeColor" title="XXXX" :value="test1"></cell>
              <cell title="XXXX">
                <div>
                  <img :src="require('../../../src/assets/img/plus.png')" width="20px" height="20px">
                </div>
              </cell>
              <x-input title="输入框混合" v-model="test2" placeholder="I'm placeholder" text-align="right"></x-input>
              <cell title="等待效果" :is-loading="!money" :value="money"></cell>
              <popup-picker popup-title="请选择" :title="title1" :data="list1" v-model="value1_1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择银行卡"></popup-picker>
              <cell title="银行卡样式二" @click.native="showDropdown" :value="value1_2"></cell>
              <datetime v-model="hourListValue" format="YYYY-MM-DD HH:mm" :hour-list="['09', '10', '11', '12', '13', '14', '15', '16']" :minute-list="['00', '15', '30', '45']" @on-change="timeChange" title="日期选择"></datetime>
              <datetime v-model="hourListValue" format="YYYY-MM-DD" @on-change="timeChange" title="日期选择" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>
              <x-input title="验证码" class="weui-vcode" v-model="userPas" placeholder="请输入验证码" :show-clear="false" :min="6" :max="6" @on-change="testYzm">
                <!-- <x-button slot="right" type="primary" :text="codeText" :disabled="disableCode" @click.native="postCode" mini></x-button> -->
                <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
              </x-input>
              <cell title="单选按钮" :value="radioVal">
                <zx-radio :data="['选择', '匹配', '测试']" :checkVal="0" @on-chang="radioChange"></zx-radio>
              </cell>
              <cell title="复选按钮" :value="radioVal">
                <zx-check :data="['选择', '匹配', '测试']" :checkVal="1" @on-chang="checkChange"></zx-check>
              </cell>
              <x-input title="输入用户名" v-model="havImg" placeholder="输入用户名" text-align="right">
                <a slot="right" href="javascript:void(0)" style="margin-left:0.1rem"><img :src="require('../../../src/assets/img/plus.png')" width="20px" height="20px"></a>
              </x-input>
            </group>
            <actionsheet v-show="show2" v-model="show2" :menus="menus1" @on-click-menu="setValue"></actionsheet>
          </div>
        </scroller>
      </div>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    setTimeout(() => {
      this.money = -1024
    }, 2000)
  },
  data () {
    return {
      lenghttaas: '',
      test1: 'XXX XXX',
      test2: '',
      money: null,
      title1: '选择银行卡',
      list1: [['6234 **** **** ***6 345', '6234 **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345']],
      value1_1: [],
      value1_2: '', // 下拉框选择样式二
      show2: false, // 下拉框二 是否出现
      menus1: { // 下拉框二 的显示内容
        menu1: '6234 **** **** ***6 345',
        menu2: '6234 **** **** 345'
      },
      hourListValue: '', // 时间
      userPas: '', // 验证码
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      disableCode: false,
      radioVal: '',
      checkVal: [],
      havImg: ''
    }
  },
  computed: {
    theQuery () {
      return this.$router.query.name
    }
  },
  methods: {
    back () {
      this.lenghttaas = this.$store.getters.getRouterHistoryLength
      this.$publicFun.goBack(this)
    },
    onShow () {

    },
    onHide (type) {},
    onChange (val) {},
    showDropdown () {
      this.show2 = true
    },
    setValue (val) {
      this.value1_2 = this.menus1[val]
    },
    timeChange (val) {

    },
    testYzm () {
    },
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
    },
    radioChange (val) {
      this.radioVal = val
      console.log(val)
    },
    checkChange (val) {
      this.checkVal = val
    },
    gotoss () {
      this.$bridge.callhandler('openWeb', {'url': 'cellDemo', 'closeCurrUI': 'false'}, (response) => {})
    }
  },
  watch: {
    'value1_1': function (val) {
      console.log(val)
    }
  }
}
</script>
<style>
.weui-cells__title { color: #333;} /* group title 颜色 */
.changeColor .weui-cell__ft { color: #f00;}
</style>
